<?php /*a:3:{s:40:"D:\work\tp\view\home\booklist\index.html";i:1652930577;s:19:"common2/header.html";i:1652930611;s:19:"common2/footer.html";i:1652023572;}*/ ?>


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>图书馆管理系统</title>
  <!-- 引入 layui.css -->
  <link rel="stylesheet" href="http://127.0.0.1:8000/layui/css/layui.css">
  <link rel="stylesheet" href="http://127.0.0.1:8000/layer/layer.js">
  <!-- 引入 layui.js -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <link rel="stylesheet" href="http://127.0.0.1:8000/static/index.css">
  <script src="http://127.0.0.1:8000/layui/layui.js"></script>
  <link href="http://127.0.0.1:8000/bootstrap-3.4.1-dist/css/bootstrap.css" rel="stylesheet">
  <script src="http://127.0.0.1:8000/jquery-3.6.0.min.js"></script>
  <script src="http://127.0.0.1:8000/bootstrap-3.4.1-dist/js/bootstrap.js"></script>
  <script src="http://127.0.0.1:8000/echarts.min.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">图书管理系统</div>
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item"><a href="#"><?php echo session("username"); ?>&nbsp;已登录</a></li>
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        <a href="javascript:;">
          更多操作
        </a>
        <dl class="layui-nav-child">
          <dd><a href="/signOut">退出登录</a></dd>
        </dl>
      </li>
    </ul>
  </div>

  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">图书展示</a>
          <dl class="layui-nav-child">
            <dd><a href="/home/booklist">图书列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">借阅管理</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/rights">借阅列表</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">个人中心</a>
          <dl class="layui-nav-child">
            <dd><a href="/admins/booklist">历史借阅</a></dd>
            <dd><a href="/admins/booklist">个人中心</a></dd>
          </dl>
        </li>
      </ul>
    </div>
  </div>
<!-- 内容主体区域 -->
<div class="layui-body">
    <!--        <div style="padding: 15px;"><h1 style="font-weight: 700">欢迎界面</h1></div>-->
    <div id="user_container" style="padding: 15px;">
        <!--            面包屑导航-->
        <span class="layui-breadcrumb">
              <a href="#" style="font-weight: 700;color: #000!important;">首页</a>
              <a href="#" style="font-weight: 700;color: #000!important;">图书展示</a>
              <a href="" >图书列表</a>
            </span>
        <div class="layui-row layui-col-space15" style="margin-top: 15px">
            <div class="layui-col-md12">
                <div class="layui-panel" style="padding: 20px">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input id="searchVal" style="float: left" type="text" placeholder="请输入编号/名称/作者查找" autocomplete="off" class="layui-input">
                            <button id="search" style="float: left;margin-left: -1px;outline: none;" type="button" class="layui-btn  "><i class="layui-icon layui-icon-search"></i></button>

<!--                            <select name="city" lay-verify="" style="margin-left: 15px;height: 38px;border-color: #009688;">-->
<!--                                <option value="">请选择一个类别</option>-->
<!--                                <option value="010">北京</option>-->
<!--                                <option value="021">上海</option>-->
<!--                                <option value="0571">杭州</option>-->
<!--                            </select>-->

                        </div>
                    </div>
                    <table lay-filter="adminTable"  class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</div>



<!--操作模板字符-->
<script type="text/html" id="currentTableBar">
    <a  class="layui-btn layui-btn-normal layui-btn-sm data-count-edit" lay-event="edit">点击借阅</a>
</script>



<script>
    document.querySelector('.layui-nav-itemed').classList.remove('layui-nav-itemed');
    $('a[href$=booklist]').parent()[0].classList.add('layui-this');
    $('a[href$=booklist]').parent().parent().parent()[0].classList.add('layui-nav-itemed');

    var formhorizontal  = document.querySelector('.form-horizontal')
    var sureBtn = document.getElementById('sureBtn');
    layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

        // 更新用户状态
        form.on('switch(switchTest)', async function(obj){
            var id = $(this).attr('mid');
            // console.info('id:' + id);
            var isManager = obj.elem.checked?"1":"0";
            // console.info('isManager:' + isManager);
            const {data:res} = await axios.post('/admins/admin/editState',{
                state:isManager,
                id:id})

            if(res.state!==200) {
                return layer.msg(res.message,
                    {icon: 0, time: 1000})
            }
            layer.msg('更改成功', {
                icon: 1,
                time: 1500
            })
        })

        // 顶部搜索逻辑
        var search = document.getElementById('search');
        var searchVal = document.getElementById('searchVal');

        search.addEventListener('click',function () {
            // console.log(searchVal.value)
            table.reload('adminTable', {
                where: { //设定异步数据接口的额外参数，任意设
                    name: searchVal.value
                }
                ,page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        })




        // 渲染表格
        table.render({
            elem: '#currentTableId',
            limit:4
            ,url: "<?php echo url('/home/booklist/article'); ?>" //数据接口
            ,page: true //开启分页
            ,limits:[2,4,6,8]
            ,skin: 'row,line'
            ,id:'adminTable'
            ,cols: [[ //表头
                // {type: "checkbox", },
                {field: 'id',align:"center", width: 80, title: '编号', sort: true},
                {field: 'bname',align:"center", title: '名称'},
                {field: 'author',align:"center", title: '作者'},
                {field: 'count',align:"center", title: '数量'},
                {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
            ]],

        });




        // 编辑删除绑定事件
        table.on('tool(adminTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
           if(layEvent === 'edit'){

            }
        });

    });




</script>



</body>

</html>
